<template>
	<div>
		<HeaderComponent />
		<div class="content-box">
			<div class="content-sub-box">
				<LeftMenuComponent activeIndex="3" />
				<div class="content-right-box">
					<div class="right-top-box">
						<div class="right-vertical-box"></div>
						<div class="right-vertical-title-box">
							会刊内容提交
						</div>
					</div>
					<div class="login-box">
						<!-- <div class="reset-box">
							<div class="reset-user-pic">
								<img src="../assets/code.png" alt="">
							</div>
							<div class="reset-user-name">
								<span class="reset-user-title">用户名</span><br>
								<span class="reset-user-value">中半协</span>
							</div>
							<div class="reset-user-company">
								<span class="reset-user-title">公司名称</span><br>
								<span class="reset-user-value">中国国际半岛协会</span>
							</div>
						</div> -->
						<div class="help-box">
							<div class="help-title-1">
								<span>
									请您确认您的中文企业名称和展位号，这些信息将出现在展览会刊印刷及电子版、大会网站、现场信息牌、观众参观指南以及标准展位的展位楣板。
								</span>
							</div>
							<div class="help-title-2">
								<span>
									基本信息确认后方可进行会刊信息提交。如此处显示的名称有误，需进行修改或补充，请联系您的客户经理。
								</span>
							</div>

							<el-button type="primary" @click="AgreeContinue">确认并继续</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<FooterComponent />
	</div>
</template>

<script>
	import {
		show
	} from "/src/api/journalContent.js";
	import HeaderComponent from './Header.vue';
	import FooterComponent from './Footer.vue';
	import LeftMenuComponent from './LeftMenu.vue';
	export default {
		name: 'JournalContentComponent',
		components: {
			HeaderComponent,
			FooterComponent,
			LeftMenuComponent
		},
		data() {
			return {
				dataShow: 0
			};
		},
		methods: {
			AgreeContinue() {
				this.$router.push("/journal-content-save")
			},
			show() {
				show().then(data => {
					console.log(data);
				})
			}
		},
		created() {
			// this.show();
		}
	}
</script>

<style scoped>
	.help-title-2 {
		color: #666666;
		margin-top: 30px;
		font-size: 16px;
	}

	.help-title-1 {
		background: #EEF4FE;
		color: #4188EB;
		font-size: 16px;
		padding: 20px;
		text-align: left;
		letter-spacing: 1px;
	}

	.help-box {
		width: 96%;
		margin: auto;
	}

	.reset-user-company {
		margin-top: 10px
	}

	.reset-user-name {
		margin-top: 10px
	}

	.reset-user-value {
		color: #9A9A9A
	}

	.reset-user-title {
		font-weight: 600;
		color: #000;
		line-height: 1.5;
	}

	.reset-user-pic img {
		width: 100px;
		height: 100px;
	}

	.reset-user-pic {
		margin-top: 30px;
	}

	.reset-box {
		width: 300px;
		float: left;
		height: 270px;
		background: #EEF4FE;
		border-radius: 5px;
		margin-left: 20px;
	}

	.el-button {
		margin-left: 39px;
		background: none;
		box-sizing: border-box;
		background-color: rgb(0, 102, 173);
		color: #fff;
		backdrop-filter: blur(3px);
		font-weight: 600;
		margin-top: 40px;
		letter-spacing: 4px;
		width: 180px;
		height: 40px;
		background: #2B64A8;
		border-radius: 4px;
		border: 1px solid #2B64A8;
		font-size: 18px;
	}

	.login-box {
		width: 870px;
		height: 290px;
		border: 1px #eeeeee solid;
		margin: 20px auto;
		border-radius: 3px;
		padding-top: 45px;
	}

	.right-vertical-title-box {
		width: 200px;
		height: 40px;
		font-size: 22px;
		color: #333333;
		line-height: 2.3;
		text-align: left;
		font-style: normal;
		overflow: hidden;
	}

	.right-vertical-box {
		width: 4px;
		height: 23px;
		background: #0066ad;
		float: left;
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.right-top-box {
		height: 52px;
		width: 910px;
		border-bottom: 1px #DADADA solid;
	}

	.content-right-box {
		width: 910px;
		float: left;
		margin-left: 25px;
		height: 400px;
		overflow: hidden;
		margin-bottom: 30px;
		box-shadow: 0px 10px 20px 0px rgba(43, 100, 168, 0.1);
	}

	.content-box {
		overflow: hidden;
	}

	.el-menu .el-menu-item.is-active {
		background: rgb(0, 102, 173) !important;
		color: #fff;
	}

	.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
		border-bottom: 0;
	}

	.el-menu-vertical li {
		width: 220px !important;
		text-align: left;
		display: inherit;
		height: 45px;
		line-height: 2.5;
		color: rgb(0, 102, 173);
		background: #fff;
	}

	.el-menu-vertical {
		width: 220px;
		margin: auto;
		margin-top: 10px;
	}

	.content-left-box {
		width: 260px;
		overflow: hidden;
		height: 385px;
		border: 1px solid #eeeeee;
		float: left;
	}

	.content-left-font {
		font-size: 18px;
	}

	.contnet-menu-title-box {
		color: #fff;
		font-size: 22px;
		float: left;
		margin-top: 13px;
		margin-left: 15px;
	}

	.content-menu-icon-box img {
		width: 100%;
		height: 100%;
	}

	.content-menu-icon-box {
		width: 36px;
		height: 36px;
		float: left;
		margin-left: 45px;
		margin-top: 10px
	}

	.contnet-left-top-box {
		background-color: rgb(0, 102, 173);
		width: 260px;
		height: 60px;
	}

	.content-sub-box {
		width: 1220px;
		margin: auto;
		margin-top: 20px;
	}
</style>